<template>
	<div class="cates">
		<searchInput />
		<view class="cates_container">
			<!-- 左侧 -->
			<scroll-view class="left_menu" scroll-y :scroll-top="scrollTop">
				<view v-for="(item,index) in leftMenuList" :key="index" :class="index === currentIndex?'menu_item active':'menu_item'"
				 @click="handleItemTap(index)">{{item}}</view>
			</scroll-view>
			<!-- 右侧 -->
			<scroll-view class="right_menu" scroll-y>
				<!-- 大组 -->
				<view class="goods_group" v-for="(item,index) in rightContent" :key="index">
					<view class="goods_title">
						<text class="delimiter">/</text>
						<text class="title">{{item.cat_name}}</text>
						<text class="delimiter">/</text>
					</view>
					<view class="goods_list">
						<!-- 路由跳转 -->
						<navigator v-for="(item2,index2) in item.children" :key="index2" :url="'/pages/goods_list/index?cid='+item2.cat_id">
							<image :src="item2.cat_icon" mode="widthFix"></image>
							<view class="goods_name">{{item2.cat_name}}</view>
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
	</div>
</template>

<script>
	import {
		request
	} from '../../utils/tools.js'
	import searchInput from '../../components/searchInput'
	export default {
		components: {
			searchInput
		},
		data() {
			return {
				leftMenuList: [],
				rightContent: [],
				Cates: [],
				currentIndex: 0,
				scrollTop: 0
			}
		},
		methods: {
			toGoodsList(cat_id) {
				uni.navigateTo({
					url: '/pages/goods_list/index?cid=' + cat_id
				})
			},
			// 左侧点击事件
			handleItemTap(index) {
				console.log('左侧index', index);
				// 精髓=======================================
				this.rightContent = this.Cates[index].children
				this.currentIndex = index
				this.currentIndex = index
				this.scrollTop = 0
			},
			async getCates() {
				const res = await request({
					url: 'categories'
				})
				console.log('category 请求', res)
				this.Cates = res.data.message
				// console.log('this.Cates', this.Cates)
				// 写入缓存数据
				uni.setStorageSync('cates', {
					time: Date.now(),
					data: this.Cates
				})
				this.leftMenuList = this.Cates.map(v => v.cat_name)
				this.rightContent = this.Cates[0].children
			}
		},
		created() {
			this.getCates()
		}
	}
</script>

<style lang='less' scoped>
	page {}

	.cates {
		height: 100%;		

		// 容器
		.cates_container {
			width: 100vw;
			// 减去搜索组件高度
			height: 100%;
			margin-bottom: 100rpx;
			/* height: ~'calc(100vh - 278rpx)'; */
			display: flex;
			overflow: hidden;

			// 左
			.left_menu {
				flex: 2;

				.menu_item {
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
				}

				.active {
					color: var(--themeColor);
					border-left: 5rpx solid currentColor;
				}
			}

			// 右
			.right_menu {
				flex: 5;

				.goods_group {

					// 标题
					.goods_title {
						height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.delimiter {
							color: #ccc;
							padding: 0 10rpx;
						}
					}

					// 子类
					.goods_list {
						display: flex;
						flex-wrap: wrap;

						navigator {
							width: 33.3%;
							text-align: center;

							image {
								width: 50%;
							}

						}
					}
				}
			}
		}
	}
</style>
